<template>
  <NodeContainer
    :title="data.typeName"
    :icon="data.icon"
    :has-more-options="true"
    v-bind="$attrs"
  >
    <div class="node-content">
      <div class="model-name">{{ data.modelName || "未选择模型" }}</div>
      <slot></slot>
    </div>
  </NodeContainer>

  <Handle id="a" type="target" :position="Position.Left" />
  <Handle id="a" type="source" :position="Position.Right" />
</template>

<script setup lang="ts" name="ChatModelNode">
import { markRaw } from 'vue'
import { Handle, Position } from "@vue-flow/core";
import NodeContainer from "../node_container.vue";

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
    required: true,
  },
  selected: {
    type: Boolean,
    default: false,
  },
  dragging: {
    type: Boolean,
    default: false,
  },
});

</script>

<style scoped>
@import "@/assets/handle.css";

.node-content {
  padding: 10px;
  flex-grow: 1;
}

.model-name {
  font-weight: bold;
  margin-top: 5px;
  color: #333;
}
</style>
